<!--
	组织架构树
	@func 组织架构树收起张开回调事件
  @nodeClick  组织架构树选中的回调事件
-->
<template>
  <div
    class="all_tri4s"
    :style="treeType ? 'margin-left: 0px;' : 'margin-left: -240px;'"
  >
    <div
      class="tree all_tri4s"
      :style="scroll > 90 ? 'top:0px;height:100%;' : ''"
      @mouseover="mouseOver"
      @mouseleave="mouseLeave"
    >
      <el-scrollbar :style="width">
        <div style="margin: 10px; position: relative">
          <div class="tree-title">
            组织树
            <span class="textMain" style="float: right; cursor: pointer"
              >切换全称</span
            >
          </div>

          <!-- <el-button-group style="margin-bottom: 10px; display: block">
            <el-button type="primary" size="mini">党组织</el-button>
           <el-button size="mini">行政组织</el-button>
            <el-button size="mini">常用组</el-button>
          </el-button-group> -->
          <el-input
            placeholder="请输入组织名称"
            prefix-icon="el-icon-search"
            size="mini"
            v-model.trim="orgNameSearch"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-circle-close"
              @click="orgNameSearch = ''"
            ></i>
          </el-input>
          <el-tree
            style="padding: 10px 10px 30px 0"
            :data="cacheData"
            node-key="orgId"
            ref="tree1"
            :default-expanded-keys="[1]"
            :default-checked-keys="[2035]"
            :highlight-current="true"
            :empty-text="emptyText"
            :filter-node-method="filterNode"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
      </el-scrollbar>
      <span
        v-if="spanState != 'none'"
        @mouseover.stop="spanOver"
        :class="treeType ? 'icon-flexible' : 'icon-flexible close'"
        @click="treeOn()"
      ></span>
    </div>
  </div>
</template>

<script>
import getTreeApi from "@/api/tree";
export default {
  props: {
    spanState: {
      type: String,
      default: ""
    },
    // 控制显示现存的和历史党组织树   1 现存  0历史
    typeStatus: {
      type: String,
      default: "1"
    },
    // 是否属地化(0否，1是)
    isLocal: {
      type: String,
      default: ""
    },
    //切换显示所有组织
    toggleAllorgan: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      treeType: true,
      hoverType: false,
      activeName: "first",
      width: "",
      orgNameSearch: "",
      cacheData: [],
      data: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      scroll: 0,
      emptyText: "暂无数据", //数据为空的替代文本
      nodeData: "", //选中的数据
      searchResult: 0,
      noDataShow: false
    };
  },
  watch: {
    orgNameSearch: function(val) {
      this.searchResult = 0;
      this.$refs.tree1.filter(val);
      this.$nextTick(() => {
        if (this.searchResult == 0) {
          this.noDataShow = true;
        } else {
          this.noDataShow = false;
        }
      });
    }
  },
  methods: {
    treeOn() {
      this.treeType = !this.treeType;
      this.$emit("func", this.treeType);
    },
    handleNodeClick(data) {
      this.nodeData = data;
      console.log("---选中的值", data);
      this.$emit("nodeClick", data);
    },
    // 移入
    mouseOver() {
      if (this.treeType) {
        this.width = "width:inherit;";
        this.hoverType = false;
      }
    },
    spanOver() {
      if (this.hoverType) {
        this.width = "width: 240px;";
      }
    },
    // 移出
    mouseLeave() {
      if (this.spanState != "none") {
        this.width = "width: 240px;";
        this.hoverType = true;
      }
    },
    filterNode: function(value, data) {
      console.log("---筛选结果", value, data);
      if (data.ORG_NAME.indexOf(value) >= 0) {
        this.searchResult += 1;
        return true;
      } else {
        return false;
      }
    },
    handleScroll() {
      // 页面滚动距顶部距离
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      var scroll = scrollTop - this.scroll;
      this.scroll = scrollTop;
      // if(scroll<0){
      //     //console.log('up'+this.scroll)
      // 	if(this.scroll<99){

      // 	}
      // }else{
      //     //console.log('down'+this.scroll)
      // 	if(this.scroll>101){

      // 	}
      // }
    },
    //默认点击
    defaultClick() {},
    // 公共获取所有的组织
    getTreeAll() {
      let that = this;
      let data = {
        status: this.typeStatus,
        roleType: "1",
        isLocal: "",
        userId: ""
      };
      that.$http.get(getTreeApi.getAllTypeTree, data).then(res => {
        if (res.status == 200) {
          if (JSON.stringify(res.data.data) == "{}") {
            this.emptyText = "暂无数据";
          }
          this.$emit("nodeClick", res.data.data);
          that.cacheData = that.diguiData([res.data.data]);
        }
      });
    },
    // 公共获取组织树数据
    getTree(isLocal) {
      let that = this;
      let roleType = JSON.parse(localStorage.getItem("userRole"));
      let userId = JSON.parse(localStorage.getItem("userInfo")).userId; //当前用户的id
      let data = {
        status: this.typeStatus,
        roleType: roleType || "1",
        isLocal,
        userId
      };
      that.$http.get(getTreeApi.getAllTypeTree, data).then(res => {
        if (res.status == 200) {
          if (JSON.stringify(res.data.data) == "{}") {
            this.emptyText = "暂无数据";
          }
          this.$emit("nodeClick", res.data.data);
          that.cacheData = that.diguiData([res.data.data]);
        }
      });
    },
    //递归构造数据
    diguiData(data) {
      let res = data;
      function each(arr) {
        arr.forEach(item => {
          item.label = item.orgName;
          if (item.hashNext && item.children) {
            each(item.children);
          } else {
            return;
          }
        });
      }
      each(data);
      return res;
    }
  },
  mounted() {
    // 监听（绑定）滚轮 滚动事件
    window.addEventListener("scroll", this.handleScroll, true);
    if (this.isLocal == "" && !this.toggleAllorgan) {
      this.getTree(this.isLocal);
    } else if (this.isLocal == "" && this.toggleAllorgan) {
      this.getTreeAll(); //获取所有的组织树
    }
  }
};
</script>

<style lang="less" scoped>
.treeContainer {
  width: 240px;
  height: 500px;
  display: inline-flex;
  margin-left: 0px;
}
.tree {
  position: fixed;
  min-width: 240px;
  min-height: 700px;
  height: calc(100% - 95px);
  background: #fff;
  box-shadow: 0 0 5px #ededed;
  z-index: 99;
}
/deep/ .el-button--mini,
.el-button--mini.is-round {
  padding: 7px 13px;
}
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
/deep/ .el-scrollbar {
  height: 100%;
  width: 240px;
}
/deep/ .el-tree-node__label {
  font-size: 14px;
}
/deep/ .el-tree-node__content {
  height: 1.8rem;
}
/deep/ .el-tree-node__content .el-checkbox {
  margin-bottom: 0;
}
/deep/ .el-tree-node__content .el-tree-node__label {
  text-align: right;
}
.pack {
  position: absolute;
  right: -3px;
  top: 4px;
  color: #409eff;
  cursor: pointer;
}
.icon-flexible {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  right: -17px;
  width: 17px;
  height: 60px;
  cursor: pointer;
  background: url()
    no-repeat;
}
.icon-flexible.close {
  background: url()
    no-repeat;
}
.tree-title {
  color: rgb(89, 89, 89);
  line-height: 32px;
  padding-left: 28px;
  background: url()
    4px center no-repeat;

  text-align: left;
  margin-bottom: 10px;
}
</style>
